
uni-page-body{
	height: 100%;
}
page{
	height: 100%;
}
// 测试动画
.test01{
	// height: 300upx;
	height: 100%;
	.input-box{
		&.showbox{
			animation: show 0.15s linear both;
		}
		&.hidebox{
			animation: hide 0.15s linear both;
		}
		display: flex;
		background-color: #fff;
		min-height: 100upx;
		position: fixed;
		z-index: 20;
		bottom: 0;
		width: 100%;
		.more{
			flex: 1;
		}
		.input{
			flex: 1;
			textarea{
				height: 44upx;
				min-height: 100upx;
			}
		}
		.show{
			flex: 1;
		}
	}
	// 写动画
	@keyframes show {
		0%{
			transform: translateY(0);
			
		}
		100%{
			transform: translateY(-42vw);
		}
	}
	@keyframes hide {
		0%{
			transform: translateY(-42vw);
		}
		100%{
			transform: translateY(0);
		}
	}
	
	.emoji-box{
		&.showbox{
			animation: show 0.15s linear both;
		}
		&.hidebox{
			animation: hide 0.15s linear both;
		}
		width: 100%;
		height: 42vw;
		// padding: 20upx 2%;
		background-color: #f3f3f3;
		border-top: solid 1upx #ddd;
		position: fixed;
		z-index: 20;
		top: 100%;
	}
}
.docker{
	width: 100%;
	height: 100%;
	background-color: rgba($color: #000000, $alpha: 0.3);
}

@keyframes boxshow{
	0% {
		height: 0;
	}
	100% {
		height: auto;
		
	}
}
@keyframes boxhide{
	0% {
		height: auto;
		
	}
	100% {
		
		height: 0;
		
	}
}
.box{
	&.boxshow{animation: boxshow 0.15s linear both;}
	&.boxhide{animation: boxhide 0.15s linear both;}
	width: 100%;
	background-color: #4CD964;
	position: absolute;
	top: 300upx;
	display: none;
}
.boxActive{
	&.boxshow{animation: boxshow 0.15s linear both;}
	&.boxhide{animation: boxhide 0.15s linear both;}
	width: 100%;
	background-color: #4CD964;
	position: absolute;
	top: 300upx;
	display: block;
}
